<template>
  <div class="comment">
    <div class="comment-title">评论</div>
    <div class="comment-none" v-if="comment.length <= 0 || !comment">
      <van-image :src="res.noComment" class="icon-none"></van-image>
      <div class="comment-note-text">暂无评论</div>
    </div>
    <div v-else>
      <div class="view-comment-list" v-for="(item, index) in comment" :key="index">
        <van-image :src="item.userHead" round class="view-comment-list-item-photo"></van-image>
        <div class="view-comment-list-item">
          <div class="comment-title">
            <span class="comment-name">{{item.userNick}}</span>
            <div style="flex: 1"></div>
            <love></love>
          </div>
          <span class="comment-content">{{ item.content }}</span>
          <div class="comment-sub">
            <span class="comment-sub-time">{{ item.createTime }}</span>
            <div @click="delComment(item.userId,item.activityId,-1,item.commentId,index)" v-if="uid === item.userId"
                 class="comment-sub-recomment"
                 style="color: #999999;">删除
            </div>
            <div @click="clickRecomment(item,index)" class="comment-sub-recomment">回复</div>
          </div>
          <div class="comment-child" v-show="item.secondComment.length > 0">
            <div class="comment-child-item" v-for="(itemChild, indexChild) in item.secondComment" :key="indexChild">
              <span class="comment-child-item-name">{{ itemChild.userNick + '：' }}</span>
              <span class="comment-child-item-content" v-if="itemChild.replyUser">回复</span>
              <span class="comment-child-item-content">{{
                  itemChild.replyUser ? itemChild.replyUser.userNick : ''
                }}</span>
              <span class="comment-child-item-content" v-if="itemChild.replyUser">：</span>
              <span class="comment-child-item-content">{{ itemChild.content }}</span>
              <span>
                <span
                    @click="delComment(itemChild.userId,item.activityId,item.commentId,itemChild.commentId,indexChild)"
                    v-if="item.userId === uid || itemChild.userId === uid"
                    class="comment-child-item-delete">删除</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import res from './images/resources';
import {Toast} from 'vant';
import Love from '@/components/Love/index';

export default {
  name: "CommentIndex",
  components: {Love},
  data() {
    return {
      res: null,
      uid: 0
    }
  },
  props: {
    comment: {
      type: Array
    },
    act_id: {
      type: Number
    }
  },
  created() {
    this.res = res;
    this.uid = JSON.parse(localStorage.getItem('loginInfo')).id;
  },
  methods: {
    delComment(userId, activityId, parentCommentId, commentId) {
      return axios.post('/comment/del', {
        userId,
        activityId,
        parentCommentId,
        commentId
      }).then(res => {
        console.log(res);
        if (res.status === 200) {
          Toast.success('删除评论成功');
          setTimeout(() => {
            this.$router.go(0);
          },2000)
        }
      })
    },
    clickRecomment(item, index) {
      this.$emit('clickRecomment', item, index);
    }
  }
}
</script>

<style scoped lang="scss">
.comment {
  margin-top: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  //align-items: center;
  padding: 15px;

  .comment-title {
    width: 98%;
    color: #333333;
    font-weight: bold;
    font-size: 17px;
  }
}

.comment-none {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding-bottom: 75px;
}

.comment-note-text {
  color: #808080;
  font-size: 20px;
  margin-top: 30px;
}

.view-comment-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: white;
  padding: 20px 0;
  border-bottom: 1px solid #f6f6f6;
}

.view-comment-list-item-photo {
  height: 30px;
  width: 30px;
  //border-radius: 40rpx;
  border: 1px solid #f6f6f6;
}

.view-comment-list-item {
  margin-left: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.comment-name {
  color: #666;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.comment-title {
  align-items: center;
  display: flex;
  height: 30px;
  flex-direction: row;
}

.comment-content {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}

.comment-sub {
  display: flex;
  align-items: center;
  flex-direction: row;

  .comment-sub-time {
    color: #999;
    font-size: 8px;
  }

  .comment-sub-recomment {
    color: #666;
    font-size: 14px;
    padding: 0 0 0 10px;
  }
}

.comment-child {
  background-color: #f8f8f8;
  border-radius: 5px;
  padding: 0 10px;
}

.comment-child-item {
  flex-wrap: wrap;
  margin: 7.5px 0;
  display: flex;
  align-items: center;
  flex-direction: row;

  .comment-child-item-name {
    white-space: nowrap;
    font-size: 15px;
    color: #5074cf;
  }

  .comment-child-item-content {
    font-size: 15px;
    text-align: center;
  }

  .comment-child-item-delete {
    font-size: 14px;
    color: #999999;
    margin-left: 15px;
    text-align: center;
  }
}

</style>
